<template>
  <a-space direction="vertical" style="width: 100%">
    <div class="add-td" style="text-align: right; margin-right: 50px">
      <a-button type="primary" @click="addTd" :disabled="props.disabled"
        >添加</a-button
      >
    </div>
    <a-table
      :columns="copyProps.columns"
      :data="copyProps.data"
      :scroll="scroll"
      :pagination="false"
    >
      <template #columns>
        <a-table-column title="物料类型" :width="100" align="center"
          ><template #cell="{ record }">
            <a-input disabled v-model="record.materialName" /> </template
        ></a-table-column>
        <a-table-column title="物料编码" :width="100" align="center"
          ><template #cell="{ record }">
            <a-input disabled v-model="record.number" /> </template
        ></a-table-column>
        <a-table-column title="物料名称" :width="100" align="center"
          ><template #cell="{ record }">
            <a-input disabled v-model="record.name" /> </template
        ></a-table-column>
        <a-table-column title="规格型号" :width="100" align="center"
          ><template #cell="{ record }">
            <a-input disabled v-model="record.spec" /> </template
        ></a-table-column>
        <a-table-column title="基本单位" :width="100" align="center"
          ><template #cell="{ record }">
            <a-input disabled v-model="record.basicName" /> </template
        ></a-table-column>
        <a-table-column title="需求数量" :width="100" align="center"
          ><template #cell="{ record }">
            <a-input-number
              :min="1"
              ref="refInput"
              :disabled="props.disabled"
              v-model="record.amount"
            /> </template
        ></a-table-column>
        <a-table-column title="需求交付日期" :width="100" align="center"
          ><template #cell="{ record }">
            <a-date-picker
              :disabled="props.disabled"
              v-model="record.deliveryTime"
              style="width: 200px" /></template
        ></a-table-column>
        <a-table-column
          v-if="!props.disabled"
          title="操作"
          :width="100"
          align="center"
          ><template #cell="{ rowIndex }">
            <a-space>
              <a-button
                :disabled="props.disabled"
                type="text"
                status="danger"
                @click="del(rowIndex)"
                >删除</a-button
              >
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </a-space>
  <!-- <a-modal
    v-if="visible"
    width="1100px"
    v-model:visible="visible"
    @ok="updateMaterialData"
    @cancel="handleCancel"
    :mask-closable="false"
  >
    <template #title> 物料产品选择 </template>
    <div class="container">
      <div class="content">
        <a-space :size="30">
          <div style="display: flex">
            <a-space>
              <div>物料名称：</div>
              <a-input-search
                v-model="searchNumber"
                placeholder="请输入物料名称"
                search-button
                @search="search"
              />
            </a-space>
          </div>
          <div>
            <a-space>
              <a-button type="primary" @click="search">
                <template #icon> <icon-search /> </template>搜索</a-button
              >
              <a-button @click="reset">
                <template #icon> <icon-sync /> </template>重置</a-button
              >
            </a-space>
          </div>
        </a-space>
      </div>
      <div class="content">
        <a-table
          row-key="id"
          :data="Data"
          :row-selection="rowSelection"
          v-model:selectedKeys="selectedKeys"
          :scroll="scroll"
          :pagination="pagination"
          @page-change="pageChange($event)"
          @page-size-change="pageSizeChange($event)"
          @select="onSelect"
          @select-all="onSelectAll"
        >
          <template #columns>
            <a-table-column title="物料编码" data-index="number" align="center">
            </a-table-column>
            <a-table-column title="物料名称" data-index="name" align="center">
            </a-table-column>
            <a-table-column title="规格型号" data-index="spec" align="center">
            </a-table-column>
            <a-table-column
              title="物料/产品"
              data-index="materialName"
              align="center"
            >
            </a-table-column>
          </template>
        </a-table>
      </div>
    </div>
  </a-modal> -->

  <materielModal
    title="物料产品选择"
    v-model:visible="materielModalVisible"
    @changeVisible="changeVisible"
    @searcchMaterialData="updateMaterialData"
  />
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted, computed, watch } from 'vue';
  import uniqueid from 'lodash.uniqueid';
  import dayjs from 'dayjs';
  import {
    GetMaterialList,
    PostMaterialList,
  } from '@/api/inventory-management/material-management';
  import { cloneDeep } from 'lodash';

  const materielModalVisible = ref(false);
  const changeVisible = (e: boolean) => {
    materielModalVisible.value = e;
  };
  const emit = defineEmits(['update:oneValue', 'update:props']);
  const props = withDefaults(
    defineProps<{
      props: { [propName: string]: any };
      name?: string;
      required?: boolean;
      disabled?: boolean;
      oneValue: any;
      regex?: {
        [name: string]: {
          role: any;
          name: any;
        };
      };
    }>(),
    {}
  );

  let copyProps = computed({
    get() {
      return { ...props.props };
    },
    set(val) {
      emit('update:props', val);
    },
  });

  interface ParamsType {
    pageIndex: number;
    pageSize: number;
    number: string;
    clientCompanyName: string;
    status: number[];
    startTime: string;
    endTime: string;
  }

  const addTd = () => {
    materielModalVisible.value = true;
  };

  let refInput = ref();
  const updateMaterialData = (selectedList: any) => {
    props.props.data = selectedList.map((item: any) => {
      item.managementId = item.id;
      delete item.id;
      delete item.updatedAt;
      delete item.createdAt;
      return {
        ...item,
      };
    });
    copyProps.value = {
      ...props.props,
    };
    console.log('shen', copyProps.value);

    refInput.value?.focus();
  };

  const del = (index: number) => {
    props.props.data.splice(index, 1);
    copyProps.value = {
      ...props.props,
    };
  };
</script>

<style scoped lang="less">
  .container {
    margin-bottom: 20px;

    .content {
      padding: 20px 20px;
    }
    .state-item {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }
    .state-item-Y {
      width: 30px;
      height: 30px;
      font-size: 12px;
      border: 1px solid rgba(148, 191, 255, 1);
      background-color: rgba(232, 243, 255, 1);
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #3d7eff;
    }
    .state-item-N {
      color: #f53f3f;
      width: 30px;
      height: 30px;
      font-size: 12px;
      border: 1px solid rgba(251, 172, 163, 1);
      background-color: rgba(255, 236, 232, 1);
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  :deep(.arco-table-tr) {
    height: 40px;
  }
  :deep(.arco-table-th) {
    font-weight: bold;
  }
</style>
